<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 21:26:48
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom3_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Line } from '@antv/g2plot';
export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    // 3. 初始化图表
    initChart(){
      const data = [
        {
          "year": "1.8", "value": 0,"category": "tsp"
        },
        {
          "year": "1.8","value": 54,"category": "pm10"
        },
        {
          "year": "1.8","value": 8, "category": "pm25"
        },
        {
          "year": "1.9", "value": 98, "category": "tsp"
        },
        {
          "year": "1.9", "value": 9,  "category": "pm10"
        },
        {
          "year": "1.9", "value": 23,  "category": "pm25"
        },
        {
          "year": "1.10",   "value": 54,  "category": "tsp"
        },
        { 
           "year": "1.10",  "value": 11,  "category": "pm10"
        },
        {
          "year": "1.10", "value": 8, "category": "pm25"
        },
        {
          "year": "1.11",  "value": 7,  "category": "tsp"
        },
        {
          "year": "1.11", "value": 24, "category": "pm10"
        },
        {
          "year": "1.11","value": 18,  "category": "pm25"
        },
        {
          "year": "1.12", "value": 95,  "category": "tsp"
        },
        {
          "year": "1.12", "value": 24, "category": "pm10"
        },
        {
          "year": "1.12", "value": 34, "category": "pm25"
        }
      ]
        const line = new Line(this.$refs.bottom3_container, {
          data,
          xField: 'year',
          yField: 'value',
          seriesField: 'category',
          xAxis: {
            label: {
              rotate: -45,
              offset: 10,
              style: {
                fill: "white",
                fontFamily: "TencentSans",
                fontSize: 16,
              },
          },
          },
          yAxis: {
            label: {
              style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
             }
            },
          },
        });
        line.render();
    }
  }
}
</script>